<template>
	<view class="message-detail-container">
		<!-- 顶部导航栏 - 显示发送者名称 -->
		<view class="nav-bar">
			<view class="sender-info">
				<view class="nav-title">{{ messageData.senderName }}</view>
				<view class="sender-badge">{{ messageData.senderBadge }}</view>
			</view>

			<view class="settings-btn" @click="navigateToChatSettings">
				<image src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/message-setting.png"
					mode="aspectFit" />
			</view>
		</view>

		<!-- 消息内容区域 - 采用左右布局 -->
		<view class="message-content">
			<!-- 左侧头像 -->
			<view class="avatar-container" @click="navigateToUserPage">
				<image :src="messageData.avatarUrl" mode="aspectFit" class="avatar" />
			</view>

			<!-- 右侧消息信息 -->
			<view class="message-wrapper">
				<!-- 消息气泡 -->
				<view class="message-bubble">
					<view class="message-text">{{ parseContent(messageData.content) }}</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-input-bar">
			<view class="input-wrapper">
				<input type="text" v-model="replyContent" placeholder="回复消息..." class="reply-input" />
				<view class="emoji-btn">
					<image src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/emoji.png" mode="aspectFit" />
				</view>
				<view class="send-btn" @click="sendReply" :class="{ disabled: !replyContent.trim() }">
					<text>发送</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMockMessageData,
		defaultMessage
	} from '../../mock/message.js';

	export default {
		data() {
			return {
				messageId: '',
				messageData: {
					senderName: '',
					avatarUrl: '',
					content: '',
					sendTime: '',
					senderBadge: ''
				},
				replyContent: ''
			};
		},
		onLoad(options) {
			// 从路由参数中获取消息ID
			if (options.messageId) {
				this.messageId = options.messageId;
				this.getMessageDetail();
			} else {
				// 如果没有消息ID，显示默认消息
				this.messageData = defaultMessage;
			}
		},
		methods: {
			// 获取消息详情
			async getMessageDetail() {
				try {
					// 模拟API请求延迟
					await new Promise(resolve => setTimeout(resolve, 300));

					// 根据消息ID返回不同的模拟数据
					this.messageData = getMockMessageData(this.messageId);
				} catch (error) {
					console.error('获取消息详情失败:', error);
					uni.showToast({
						title: '获取消息详情失败',
						icon: 'none'
					});
					// 显示默认消息
					this.messageData = defaultMessage;
				}
			},

			// 解析内容，处理换行符和链接
			parseContent(content) {
				// 由于在小程序中直接使用v-html可能有安全隐患，这里简单处理文本内容
				return content;
			},

			// 返回上一页
			navigateBack() {
				uni.navigateBack();
			},

			// 跳转到聊天设置页面
			navigateToChatSettings() {
				uni.navigateTo({
					url: '/pages/chat-settings/chat-settings'
				});
			},

			// 发送回复
			sendReply() {
				if (!this.replyContent.trim()) return;

				// 模拟发送回复
				uni.showToast({
					title: '回复已发送',
					icon: 'success'
				});

				// 清空输入框
				this.replyContent = '';
			},

			// 跳转到用户页面
			navigateToUserPage() {
				uni.navigateTo({
					url: `/pages/user/user?userId=${this.messageId}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './message.scss';
</style>